import React from 'react'
import Link from 'gatsby-link'
import logo from '../assets/images/bg01.jpg'
const Sidebar = (props) => (

	<div id="sidebar" className={props.SideBarMenu}>
		<div className="inner">
			<section id="sidebar-info" className="alt">
				<div className="logo">
					<span className="image avatar"><img src={logo} alt="" /></span>
					<h1 className="title">Jane Doe</h1>
					<p>Hyperspace Engineer</p>
				</div>
			</section>
			<nav id="sidebar-menu">
				<header className="major">
					<h2>Menu</h2>
				</header>
				<ul>
					<li><a href="index.html">Homepage</a></li>
					<li><a href="generic.html">Generic</a></li>
					<li><a href="elements.html">Elements</a></li>
					<li>
						<span className="opener">Submenu</span>
						<ul>
							<li><a href="#">Lorem Dolor</a></li>
							<li><a href="#">Ipsum Adipiscing</a></li>
							<li><a href="#">Tempus Magna</a></li>
							<li><a href="#">Feugiat Veroeros</a></li>
						</ul>
					</li>
					<li><a href="#">Etiam Dolore</a></li>
					<li><a href="#">Adipiscing</a></li>
					<li>
						<span className="opener">Another Submenu</span>
						<ul>
							<li><a href="#">Lorem Dolor</a></li>
							<li><a href="#">Ipsum Adipiscing</a></li>
							<li><a href="#">Tempus Magna</a></li>
							<li><a href="#">Feugiat Veroeros</a></li>
						</ul>
					</li>
					<li><a href="#">Maximus Erat</a></li>
					<li><a href="#">Sapien Mauris</a></li>
					<li><a href="#">Amet Lacinia</a></li>
				</ul>
			</nav>
			<footer id="footer">
				<p className="copyright">&copy; Untitled. All rights reserved. Demo Images: <a href="https://unsplash.com">Unsplash</a>. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
			</footer>
		</div>
		<a className="toggle" href="#sidebar" onClick={props.onToggleMenu}>Toggle</a>
	</div>
)

Sidebar.propTypes = {
	onToggleMenu: React.PropTypes.func
}

export default Sidebar
